<template>
  <div style="display: flex; flex-direction: row; flex-wrap: nowrap; gap: 0">
    <a-select
      v-model:value="searchVal"
      show-search
      placeholder="请输入关键词"
      style="width: 200px"
      :default-active-first-option="false"
      :show-arrow="false"
      :filter-option="false"
      :not-found-content="null"
      :options="options"
      @search="handleSearch"
      @change="handleChange"
    >
      <template #suffixIcon>
        <a-button @click="handleSearch"><SearchOutlined /></a-button>
      </template>
    </a-select>
  </div>
</template>

<script>
import { SearchOutlined } from '@ant-design/icons-vue';

export default {
  name: 'CMapPositionSearch',
  components: {
    SearchOutlined,
  },
  data() {
    return {
      searchVal: '',
      options: [],
    };
  },
  created() {
    (() => {
      this.map = this.$parent.map;
      this.ac = new BMap.Autocomplete({
        location: this.map,
        onSearchComplete: () => {},
      });
      this.ac.addEventListener('onconfirm', (e) => this.onConfirm(e));
    })();
  },
  methods: {
    handleSearch() {},
    handleChange() {},
    onConfirm(e) {
      let that = this;
      let v = e.item.value;
      let keyword = v.province + v.city + v.district + v.street + v.business;
      //清除地图上所有覆盖物
      this.map.clearOverlays();
      //智能搜索
      let local = new BMap.LocalSearch(this.map, {
        onSearchComplete: function () {
          let p = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
          that.map.centerAndZoom(p, 18);
          that.map.addOverlay(new BMap.Marker(p)); //添加标注
        },
      });

      local.search(keyword);
    },
  },
};
</script>

<style scoped lang="less"></style>
